{extend name="index/layout" /}

{block name="head"}
<link rel="stylesheet" href="/static/css/user.css">
<meta name="robots" content="noindex">
{/block}

{block name="content"}
<div class="user-center-container">
    <!-- 用户头部 -->
    <div class="user-header desktop-favorites">
        <h1 class="text-2xl font-bold mb-2">我收藏的電腦桌布</h1>
        <p class="opacity-90">管理您收藏的電腦桌布</p>
    </div>

    <!-- 导航链接 -->
    <div class="nav-links">
        <a href="/user/generateDesktop" class="nav-link">電腦桌布生成</a>
        <a href="/user/generateMobile" class="nav-link">手機桌布生成</a>
        <a href="/user/desktopFavorites" class="nav-link active desktop-favorites">電腦桌布收藏</a>
        <a href="/user/mobileFavorites" class="nav-link">手機桌布收藏</a>
        <a href="/user/desktopDownloads" class="nav-link">電腦桌布下載</a>
        <a href="/user/mobileDownloads" class="nav-link">手機桌布下載</a>
    </div>

    <!-- 内容容器 -->
    <div class="content-container">
        
        {if $wallpapers}
            <div class="wallpaper-grid desktop">
                {volist name="wallpapers" id="wallpaper"}
                <div class="wallpaper-card" data-id="{$wallpaper.id}">
                    <div class="wallpaper-image desktop">
                        <a href="/category/{$wallpaper.type_name|rawurlencode}/{$wallpaper.category_name|rawurlencode}/{$wallpaper.title|rawurlencode}">
                            <img src="{$wallpaper.thumbnail}" alt="{$wallpaper.title}" loading="lazy">
                        </a>
                        <div class="favorite-badge">
                            <i class="fas fa-heart"></i> 已收藏
                        </div>
                        <button class="remove-btn" onclick="removeFavorite({$wallpaper.id})" title="取消收藏">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    
                </div>
                {/volist}
            </div>
        {else}
            <div class="empty-state">
                <i class="fas fa-heart-broken"></i>
                <h3 class="text-lg font-semibold mb-2">還沒有收藏任何電腦桌布</h3>
                <p class="text-gray-500 mb-4">去發現一些美麗的電腦桌布吧！</p>
                
            </div>
        {/if}
    </div>
</div>

<script>
function removeFavorite(imageId) {
    if (!confirm('確定要取消收藏這張桌布嗎？')) {
        return;
    }
    
    fetch('/user/removeAction', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `image_id=${imageId}&action_type=like`
    })
    .then(response => response.json())
    .then(data => {
        if (data.code === 200) {
            // 移除卡片
            const card = document.querySelector(`[data-id="${imageId}"]`);
            if (card) {
                card.style.transition = 'all 0.3s ease';
                card.style.opacity = '0';
                card.style.transform = 'scale(0.8)';
                setTimeout(() => {
                    card.remove();
                    // 更新计数
                    updateCount();
                }, 300);
            }
            showMessage('已取消收藏', 'success');
        } else {
            showMessage(data.message || '操作失败', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('网络错误，请稍后重试', 'error');
    });
}

function updateCount() {
    const cards = document.querySelectorAll('.wallpaper-card');
    const countElement = document.querySelector('h2');
    if (countElement) {
        countElement.textContent = `我的桌面桌布收藏 (${cards.length})`;
    }
    
    // 如果没有卡片了，显示空状态
    if (cards.length === 0) {
        const grid = document.querySelector('.wallpaper-grid');
        if (grid) {
            grid.innerHTML = `
                <div class="empty-state" style="grid-column: 1 / -1;">
                    <i class="fas fa-heart-broken"></i>
                    <h3 class="text-lg font-semibold mb-2">還沒有收藏任何桌面桌布</h3>
                    <p class="text-gray-500 mb-4">去發現一些美麗的桌面桌布吧！</p>
                    <a href="/category/desktop" class="btn btn-primary">
                        <i class="fas fa-search mr-2"></i>瀏覽桌面桌布
                    </a>
                </div>
            `;
        }
    }
}

function showMessage(message, type) {
    const bgColor = type === 'success' ? 'bg-green-500' : 'bg-red-500';
    const messageHtml = `
        <div id="message-toast" class="fixed top-4 right-4 ${bgColor} text-white px-4 py-2 rounded-md shadow-lg z-50 transition-all duration-300 transform translate-x-full">
            ${message}
        </div>
    `;
    
    // 移除已存在的消息
    const existingToast = document.getElementById('message-toast');
    if (existingToast) {
        existingToast.remove();
    }
    
    // 添加新消息
    document.body.insertAdjacentHTML('beforeend', messageHtml);
    
    // 显示动画
    setTimeout(() => {
        document.getElementById('message-toast').classList.remove('translate-x-full');
    }, 100);
    
    // 3秒后自动隐藏
    setTimeout(() => {
        const toast = document.getElementById('message-toast');
        if (toast) {
            toast.classList.add('translate-x-full');
            setTimeout(() => {
                toast.remove();
            }, 300);
        }
    }, 3000);
}
</script>
{/block} 